/* eslint-disable @typescript-eslint/no-unused-vars */
import { getHistoryDataList } from "@/api/modules/iot/data";
import { shortcuts } from "@/hooks/useTime";
import { SchemaNodeKey } from "@/utils/constants";
import { parseProfileFromSn } from "@/utils/schema";
import moment from "moment";
import EmptyImg from "./../../../../assets/images/404.png";
import EmptyImg1 from "./../../../../assets/images/403.png";
import EmptyImg2 from "./../../../../assets/images/500.png";
import EmptyImg3 from "./../../../../assets/images/executed.png";
import EmptyImg4 from "./../../../../assets/images/login_bg.svg";
import EmptyImg5 from "./../../../../assets/images/logo.png";
import EmptyImg6 from "./../../../../assets/images/msg01.png";
import EmptyImg7 from "./../../../../assets/images/msg02.png";
import EmptyImg8 from "./../../../../assets/images/msg03.png";
import EmptyImg9 from "./../../../../assets/images/msg04.png";
import EmptyImg10 from "./../../../../assets/images/msg05.png";
export default defineComponent({
	props: {
		title: String,
		dataKey: String
	},
	emits: [],
	setup(props) {
		const profile = inject<any>(SchemaNodeKey.profile);
		const sn = parseProfileFromSn(profile.value);
		const state = reactive<any>({
			dataList: [],
			pageable: {
				pageIndex: 1,
				pageSize: 12,
				total: 0
			},
			timeRange: [moment().format("YYYY-MM-DD 00:00:00"), moment().format("YYYY-MM-DD 23:59:59")]
		});
		onMounted(() => {
			featchDataList();
		});
		//生成内存分页
		const pageDataList = computed<any[]>(() => {
			let start = (state.pageable.pageIndex - 1) * state.pageable.pageSize;
			let end = start + state.pageable.pageSize;
			return state.dataList.slice(start, end) || [];
		});
		const featchDataList = async () => {
			let { result } = await getHistoryDataList({
				idSn: sn,
				key: props.dataKey as string,
				keyType: "sensor",
				startTime: state.timeRange[0]
					? moment(state.timeRange[0]).format("YYYY-MM-DD HH:mm:ss")
					: moment().format("YYYY-MM-DD 00:00:00"),
				endTime: state.timeRange[1]
					? moment(state.timeRange[1]).format("YYYY-MM-DD HH:mm:ss")
					: moment().format("YYYY-MM-DD 23:59:59")
			});
			state.dataList = result || [];

			//调试环境的模拟数据
			if (import.meta.env.DEV && !state.dataList.length) {
				// state.dataList = [
				// 	{ src: EmptyImg },
				// 	{ src: EmptyImg1 },
				// 	{ src: EmptyImg2 },
				// 	{ src: EmptyImg3 },
				// 	{ src: EmptyImg4 },
				// 	{ src: EmptyImg5 },
				// 	{ src: EmptyImg6 },
				// 	{ src: EmptyImg7 },
				// 	{ src: EmptyImg8 },
				// 	{ src: EmptyImg9 },
				// 	{ src: EmptyImg10 },
				// 	{ src: EmptyImg },
				// 	{ src: EmptyImg },
				// 	{ src: EmptyImg },
				// 	{ src: EmptyImg1 },
				// 	{ src: EmptyImg },
				// 	{ src: EmptyImg1 },
				// 	{ src: EmptyImg2 }
				// ];
			}
		};
		return () => {
			return (
				<div>
					<div class="flex justify-between p-4 items-center">
						<div class="title pl-4 text-base">图片列表</div>
						<div>
							<span class="pr-2">时间范围</span>
							<el-date-picker
								v-model={state.timeRange}
								style="width:340px"
								type="datetimerange"
								shortcuts={shortcuts()}
								range-separator="至"
								start-placeholder="开始时间"
								end-placeholder="结束时间"
							/>
							<el-button class="iconfont iconbx-sync" style="margin-top:-5px" onClick={() => featchDataList()}>
								查询
							</el-button>
						</div>
					</div>
					<div class="history-img-list grid grid-cols-4 gap-4">
						{pageDataList.value.length ? (
							pageDataList.value.map((item: any) => {
								return (
									<div class="history-img-item shadow-md">
										{item.value ? (
											<el-image
												style="width: 100%"
												src={item.value}
												hide-on-click-modal
												preview-src-list={pageDataList.value.map((item: any) => item.value)}
												fit="cover"
											/>
										) : (
											<el-image style="width: 100%" src={EmptyImg} fit="cover" />
										)}
									</div>
								);
							})
						) : (
							<div class="history-img-item empty-item col-span-6">
								<div class="empty-container">
									<el-image
										style="width: 100%"
										src={EmptyImg}
										hide-on-click-modal
										preview-src-list={state.dataList}
										initial-index={1}
										fit="cover"
									/>
									<div class="text">暂无图片</div>
								</div>
							</div>
						)}
					</div>
					<div class="pt-4 pl-4 pb-4">
						<el-pagination
							v-model:current-page={state.pageable.pageIndex}
							v-model:page-size={state.pageable.pageSize}
							background
							layout="total, prev, pager, next"
							total={state.dataList.length}
						/>
					</div>
				</div>
			);
		};
	}
});
